<template>
  <div>
    <n-card class="CLassificationParams__content">
      <n-alert type="warning">
        <template #default>
          <span style="color: #e6a23c;">注意：只允许为第三级分类设置相关参数！</span>
        </template>
      </n-alert>
      <br>
      <n-form label-placement="left">
        <n-form-item label="选择商品分类：" style="width: 400px;">
          <n-cascader
            v-model:value="selectedValue"
            placeholder="请选择"
            :options="optionList"
            :leaf-only="true"
          />
        </n-form-item>
      </n-form>
      <n-space>
        <n-button :bordered='false' @click="propertiesState=true" :type="propertiesState===true?'info':''" >动态参数</n-button>
        <n-button :bordered='false' @click="propertiesState=false" :type="propertiesState===false?'info':''">静态属性</n-button>
      </n-space>
      
      <n-divider ></n-divider>
      <n-button :disabled="!selectedValue" @click="addProperties" type="info">{{propertiesState?'添加参数':'添加属性'}}</n-button>
      <n-data-table
        :columns="columns"
        :single-line="false"
        :data="propertiesByValue"
        :row-key="rowKey"
      >
      </n-data-table>
    </n-card>
  </div>
</template>
<script lang="ts">
import {NCard,NAlert,NTreeSelect,NForm,NFormItem,NCascader,NButton,NDivider,useDialog,useMessage,NDataTable,NInput,NSpace,NTag,NDynamicTags} from 'naive-ui';
import ShowTags from "../components/ShowTags.vue";
import {ref,computed,reactive,h} from 'vue';
export default{
  components:{
    NCard,
    NDivider,
    NAlert,
    NSpace,
    NTreeSelect,
    NForm,
    NTag,
    NFormItem,
    NCascader,
    NButton,
    NDataTable,
    NInput,
    ShowTags,
    NDynamicTags
  },
  setup(){
    const dialog=useDialog();
    const message=useMessage();
    const propertiesState=ref(true);
    const columns=computed(()=>{
      if(propertiesState.value||!propertiesState.value||change.value)
      return [
        {
        type: 'expand',
        expandable: ()=>{return true},
        renderExpand: (row:object) => {
          return h(
            ShowTags,
            {
              row:row,
              selectedValue:selectedValue.value,
              propertiesState:propertiesState.value,
            },{
            }
          )
              
                
                // let list=[];
                // let i=0;
                // for(;i<row.propertiesTags.length;i++)
                // {
                //   list[i]=h(
                //     NDynamicTags,
                //     {
                //       type:"info",
                //       closable:true,
                //       onclick:()=>{
                //         let list=JSON.parse(localStorage.getItem('goodsClassificationList'));
                //         console.log(selectedValue.value);
                //         let strlist=selectedValue.value.split(" ");
                //         let propertiesTags='';
                //         if(propertiesState.value)
                //           propertiesTags='dynamicPropertiesTags';
                //         else
                //           propertiesTags='staticPropertiesTags';
                //         list[strlist[0]].children[strlist[1]].children[strlist[2]][propertiesTags][row.propertiesName]=
                //         list[strlist[0]].children[strlist[1]].children[strlist[2]][propertiesTags][row.propertiesName].filter((item:number,index:number)=>{return index!=i});
                //         localStorage.setItem("goodsClassificationList",JSON.stringify(list));
                //         console.log(list[strlist[0]].children[strlist[1]].children[strlist[2]][propertiesTags][row.propertiesName]);
                //         change.value=true;
                //         message.success('删除成功');
                //       },
                //     },
                //     {
                //       default:()=>row.propertiesTags[i],
                //     }
                //   );
                // }
                // return list;
              
            
          
          
        }
      },
    {
      title:'#',
      key:'index',
      width:"200",
    },{
      title:propertiesState.value?'参数名称':'属性名称',
      key:'propertiesName',
    },{
      title:'操作',
      key:'action',
      render(row:object){
        inputValue.value=row.propertiesName;
        return [
          h(
          NButton,
          {
            type:'info',
            onclick:()=>{
              dialog.warning({
              title:'修改静态属性',
              closable:false,
              showIcon:false,
              content:()=>{
                
                inputValue.value=row.propertiesName;
                return h(
                  NForm,
                  {
                    labelPlacement: 'left',
                  },{
                    default:()=>h(
                      NFormItem,{
                        label:propertiesState.value?'参数名称':'属性名称',
                      },{
                        default:()=>h(
                          NInput,{
                            placeholder:'',
                            value:inputValue.value,
                            onInput:(event:any)=>{
                              inputValue.value=event;
                            
                            }
                          },
                        )
                      }
                    )
                  }
                )
              },
              positiveText: '确定',
              negativeText: '取消',
              onPositiveClick: () => {
                editProperties(row);
              },onNegativeClick: () => {
                message.error('取消了编辑操作')
              }
              })
            }

          },{
            default:()=>'编辑'
          }
        ),h(
          NButton,
          {
            type:'error',
            onclick:()=>{
              dialog.warning({
              title:'删除确认',
              content:'此操作将删除该分类, 是否继续?',
              positiveText: '确定',
              negativeText: '取消',
              onPositiveClick: () => {
                deleteProperties(row);
              },onNegativeClick: () => {
                message.error('取消了删除该静态属性的操作')
              }
              })
            }
          },{
            default:()=>'删除'
          }
        ),
        ]
      }
    }
  ]});
    const inputValue=ref('');
    const selectedValue=ref('');
    /**
     * 获得第三级分类的静态参数和动态参数
     */
    const propertiesByValue=computed(()=>{
      if(change.value)
      {
        change.value=false;
      }
      let properties='';
      let propertiesTags='';
      if(propertiesState.value==true)
      {
        properties='dynamicProperties';
        propertiesTags='dynamicPropertiesTags'
      }
      else
      {
        properties='staticProperties';
        propertiesTags='staticPropertiesTags'
      }
      let List=reactive<[]>([]);
      if(selectedValue.value)
      {
        let list=JSON.parse(localStorage.getItem('goodsClassificationList'));
        let strlist=selectedValue.value.split(" ");
        if(list[strlist[0]].children[strlist[1]].children[strlist[2]][properties])
        {
          for(let i=0;i<list[strlist[0]].children[strlist[1]].children[strlist[2]][properties].length;i++)
          {
            const map=reactive<{}>({});
            map.index=i+1;
            let propertiesName=list[strlist[0]].children[strlist[1]].children[strlist[2]][properties][i];
            map.propertiesName=propertiesName;
            let tags=list[strlist[0]].children[strlist[1]].children[strlist[2]][propertiesTags][propertiesName];
            map.propertiesTags=tags;
            List[i]=map;
          }
        }
        
      }
      
      return List;
    });
    /**
     * 修改静态属性或者动态参数
     */
    const editProperties=(row:any)=>{
      let list=JSON.parse(localStorage.getItem('goodsClassificationList'));
      let strlist=selectedValue.value.split(" ");
      let properties='';
      if(propertiesState.value)
        properties='dynamicProperties';
      else
        properties='staticProperties';
      if(inputValue.value=='')
      {
        message.error('静态属性值不为空');
        return;
      }
      list[strlist[0]].children[strlist[1]].children[strlist[2]][properties][row.index-1]=inputValue.value;
      localStorage.setItem("goodsClassificationList",JSON.stringify(list));
      change.value=true;
      let msg=propertiesState?'动态参数':'静态属性';
      message.success('修改'+msg+'成功');
    };
    /**
     * 删除静态属性或动态参数
     */
    const deleteProperties=(row:any)=>{
      let list=JSON.parse(localStorage.getItem('goodsClassificationList'));
      let strlist=selectedValue.value.split(" ");
      let properties='';
      if(propertiesState.value)
        properties='dynamicProperties';
      else
        properties='staticProperties';
      list[strlist[0]].children[strlist[1]].children[strlist[2]][properties].splice(row.index-1,1);
      localStorage.setItem("goodsClassificationList",JSON.stringify(list));
      change.value=true;
      let msg=propertiesState.value?'动态参数':'静态属性';
      message.success('删除'+msg+'成功');
    }



    const change=ref(false);
    /**
     * 读取选择框的内容
     */
    const optionList=computed(()=>{
      let list=JSON.parse(localStorage.getItem('goodsClassificationList'));
      if(change.value)
        list=JSON.parse(localStorage.getItem('goodsClassificationList'));
      let options: any[]=[];
      for(let i=0;i<list.length;i++)
      {
        if(list[i]["children"])
        {
          if(list[i]['children'][0].children)
          {
            options[i]=reactive<{}>({});
            options[i].label=list[i].classifyName;
            options[i].value=i+"";
            options[i].children=[];
            for(let j=0;j<list[i].children.length;j++)
            {
              if(list[i]['children'][j]['children'])
              {
                options[i].children[j]=reactive<{}>({});
                options[i].children[j].label=list[i].children[j].classifyName;
                options[i].children[j].value=i+" "+j;
                options[i].children[j].children=[];
                options[i].children[j].staticProperties=[];
                for(let k=0;k<list[i].children[j].children.length;k++)
                {
                  options[i].children[j].children[k]=reactive<{}>({});
                  options[i].children[j].children[k].label=list[i].children[j].children[k].classifyName;
                  options[i].children[j].children[k].value=i+" "+j+" "+k;
                }
              }
            }
          } 
        }
      }
      return options;
    });

    /**
     * 添加静态参数或动态参数
     */
    const addProperties=()=>{
      dialog.warning({
        title:'添加'+(propertiesState.value?'动态参数':'静态属性'),
        showIcon:false,
        content:()=>{
          inputValue.value='';
          return h(
            NForm,
            {
              labelPlacement: 'left',
            },{
              default:()=>h(
                NFormItem,{
                  label:(propertiesState.value?'动态参数':'静态属性')+'名称',
                },{
                  default:()=>h(
                    NInput,{
                      placeholder:'',
                      value:inputValue.value,
                      onInput:(event:any)=>{
                        inputValue.value=event;
                      }
                    },
                  )
                }
              )
            }
          )
        },
        positiveText:'确定',
        negativeText:'取消',
        onPositiveClick:()=>{
          let list=JSON.parse(localStorage.getItem('goodsClassificationList'));
          let strlist=selectedValue.value.split(" ");
          let properties='';
          let propertiesTags='';
          if(propertiesState.value)
          {            
            properties='dynamicProperties';
            propertiesTags='dynamicPropertiesTags'
          }          
          else
          {
            properties='staticProperties';
            propertiesTags='staticPropertiesTags';
          }
          if(!list[strlist[0]].children[strlist[1]].children[strlist[2]][properties])
          {
            let sp=reactive<any[]>([]);
            let spt=reactive<any[]>([]);
            sp.push(inputValue.value);
            const key=inputValue.value;
            let map=reactive<{}>({key:[]});
            spt.push(map);
            list[strlist[0]].children[strlist[1]].children[strlist[2]][properties]=sp;
            list[strlist[0]].children[strlist[1]].children[strlist[2]][propertiesTags]=spt;
          }else{
            list[strlist[0]].children[strlist[1]].children[strlist[2]][properties].push(inputValue.value)
            const key=inputValue.value;
            list[strlist[0]].children[strlist[1]].children[strlist[2]][propertiesTags][key]=[];
          }
          localStorage.setItem("goodsClassificationList",JSON.stringify(list));
          message.success('添加'+(propertiesState.value?'动态参数':'静态属性')+'成功');
          change.value=true;
        },onNegativeClick:()=>{
          message.error('取消了添加操作')
        }
      })
    }
    return {
      propertiesByValue,
      columns,
      optionList,
      selectedValue,
      addProperties,
      editProperties,
      deleteProperties,
      propertiesState,
      rowKey:(row:any)=>{
      
        return row.index;
      }
    }
  }
}


</script>
<style>
.CLassificationParams__content{
  margin:24px 24px 24px;
  width: inherit;
  font-size:12px;
}

.ClassificationParams__staticProperties{
  color:#409eff;
  height: 40px;
  font-size:14px;
  font-weight: 500;
  /* border-bottom:2px solid #409eff; */
}
</style>
